<!DOCTYPE html>
<html lang="{{@site.lang}}" xmlns:wb="http://open.weibo.com/wb">
<head>

    {{!-- 文档设置 --}}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{!-- 基础meta --}}
    <title>{{meta_title}}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {{!-- 引入css或js --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    {{!--开发时css路径--}}
    {{!-- <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" /> --}}

    {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
    {{!--这里我改为国内cdn--}}
    <script
        src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"
        crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>
    {{!-- 后台添加的content api key --}}
    <script>
        var _ApiKey = '6df64d10531e85fc0781107f8a';
    </script>
    {{!-- 这个标签输出SEO meta数据和其他重要设置 --}}
    {{ghost_head}}

</head>
<body class="{{body_class}}">
    {{^is "home"}}
        {{> site-nav}}
    {{/is}}
    {{!-- 是否显示标签云 --}}
    {{^is "home, tags, archives"}}
        {{> tag-cloud}}
    {{/is}}
    <div class="site-wrapper">

        {{!-- 所有主要内容插入这里, index.hbs, post.hbs, 等等 --}}
        {{{body}}}
        {{!-- 返回顶部 --}}
        <div class="back-top">
            <div class="back-top-arrow"></div>
        </div>
        
        {{!-- 这个footer每个页面都显示 --}}
        <footer class="site-footer outer">
            <div class="site-footer-content inner">
                {{!--规定必须加上备案号--}}
                <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}<a href="">渝ICP备16013282</a> </section>
                <nav class="site-footer-nav">
                    <a href="/blog/}">最近帖子</a>
                    {{!-- 这里是后台添加的社交网站地址这里我改成新浪微博和知乎了 --}}
                    {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
                    {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
                    <a href="http://weibo.com/wstee" target="_blank" rel="noopener">微博</a>
                    <a href="https://www.zhihu.com/people/wstee" target="_blank" rel="noopener">知乎</a>
                    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1054877601" title="1054877601" target="_blank" rel="noopener">QQ</a>
                    <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
                </nav>
            </div>
        </footer>

    </div>

    {{!-- The big email subscribe modal content --}}
    {{!-- 收集邮件 --}}
    {{#if @labs.subscribers}}
    <div id="subscribe" class="subscribe-overlay">
        <a class="subscribe-overlay-close" href="#"></a>
        <div class="subscribe-overlay-content">
            {{#if @site.logo}}
                <img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
            {{/if}}
            <h1 class="subscribe-overlay-title">订阅 {{@site.title}}</h1>
            <p class="subscribe-overlay-description">将最新最好的文章直接发送到您的收件箱。</p>
            {{subscribe_form placeholder="youremail@example.com"}}
        </div>
    </div>
    {{/if}}

    <script>
        var images = document.querySelectorAll('.kg-gallery-image img');
        images.forEach(function (image) {
            var container = image.closest('.kg-gallery-image');
            var width = image.attributes.width.value;
            var height = image.attributes.height.value;
            var ratio = width / height;
            container.style.flex = ratio + ' 1 0%';
        })
    </script>



    {{#if pagination.pages}}
    <script src="{{asset "built/infinitescroll.js"}}"></script>
    {{/if}}
    <script>
    (function(){
        // 获取样式
        function getStyle(obj,attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj,false)[attr];
            }
        }
        document.querySelector('.back-top').addEventListener('click', function(){
            window.scroll(0,0);
        })
        function onScroll() {
            var scrollY = window.scrollY;
            var siteNav = document.querySelector('.site-nav');
            var bg = siteNav.style.background;

            var backTop = document.querySelector('.back-top');
            var opacity = getStyle(backTop,'opacity');
            if(scrollY >= 300 && opacity == 0) {  
                backTop.style.setProperty('opacity', 1);
            } else if(scrollY < 300 && opacity == 1) {
                backTop.style.setProperty('opacity', 0);
            } 
            if(scrollY >= 100 && bg !== 'rgba(0, 0, 0, 0.8)') {  
                siteNav.style.setProperty('background', 'rgba(0, 0, 0, 0.8)');
            } else if(scrollY < 100 && bg === 'rgba(0, 0, 0, 0.8)') {
                siteNav.style.setProperty('background', 'rgba(0, 0, 0, 0.3)');
            } else {
                return;
            }
        }
        window.addEventListener('scroll', onScroll, true);
    })()
    </script>
    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
    {{{block "scripts"}}}

    {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
    {{ghost_foot}}

</body>
</html>
